<template>
<div>
  <el-card>

    <search :query="goodsQuery" @getList="getGoodsList" class="topbtn">
      <el-col :span="2">
        <el-button type="primary" @click="goAddpage">添加商品</el-button>
      </el-col>
    </search>
    
  <el-table border stripe :data="goodsList">
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column label="商品名称" prop="goods_name"></el-table-column>
    <el-table-column label="价格" prop="goods_price" width="110px"></el-table-column>
    <el-table-column label="商品重量" prop="goods_weight" width="130px"></el-table-column>
    <el-table-column label="创建时间" width="180px">
      <template v-slot="scope">
        {{scope.row.add_time | dateFormat}}
      </template>
    </el-table-column>

    <el-table-column label="操作" width="130px">
      <template v-slot="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit" @click=""></el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeGoods(scope.row)"></el-button>

      </template>
    </el-table-column>

  </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="goodsQuery.pagenum"
        :page-sizes="[5, 7, 9, 10]"
        :page-size="goodsQuery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
</div>
</template>

<script>
import search from "@/component/search";
import {remove} from "@/network/remove";

export default {
  name: "goods",
  created() {
    this.getGoodsList()
  },
  components:{
    search
  },
  data(){
    return{
      goodsQuery:{
        query:'',
        pagenum:1,
        pagesize:7
      },
      goodsList:[],
      total:0,


    }
  },
  methods:{
    removeGoods(row){
      remove(`goods/${row.goods_id}`,this.getGoodsList)
    },
   async getGoodsList(){
    const {data:res} = await this.$http.get("goods",{
      params:this.goodsQuery
    })

     if (res.meta.status !== 200) return this.$Message.error("获取失败")

     // console.log(res);

     this.goodsList=res.data.goods
     this.total = res.data.total

   },
    handleSizeChange(newSize){
      this.goodsQuery.pagesize = newSize
      this.getGoodsList()
    },
    handleCurrentChange(newPage){
      this.goodsQuery.pagenum = newPage
      this.getGoodsList()
    },
    goAddpage(){
      this.$router.push("/goods/add")
    }
  }
  
}
</script>

<style scoped>

</style>